<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-分级阅读'"></Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="title">
              <view class="title_line"></view>
              <view class="title_text"> 请选择课程 </view>
              <view class="title_line"></view>
            </view>
            <view class="lesson">
              <view
                class="leeson_container"
                :class="{
                  active: item.id === courseId,
                }"
                v-for="(item, index) in courseList"
                :key="index"
                @click="getLevel(item.id)"
              >
                <view class="leeson_icon"></view>
                <view class="leeson_content">
                  <view class="leeson_title">{{
                    item.courseName.slice(0, 4)
                  }}</view>
                  <view class="leeson_text">{{
                    item.courseName.slice(4)
                  }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="box">
            <view class="title">
              <view class="title_line"></view>
              <view class="title_text"> 请选择难度 </view>
              <view class="title_line"></view>
            </view>
            <view class="difficulty" v-if="levelList.length > 0">
              <view
                class="difficulty_content"
                :class="{ active: item.id === levelId }"
                v-for="(item, index) in levelList"
                :key="index"
                @click="chooseCourseLevel(item)"
              >
                {{ item.levelName }}
              </view>
            </view>
          </view>
          <view class="button" @click="startStudy()">
            <text>开始学习</text>
          </view>
          <view class="tabs">
            <view class="tabs_item" @click="getReport()">
              <view class="tabs_img">
                <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/read/icon2.png" mode="widthFix" />
              </view>
              <view class="tabs_text"> 学习报告 </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="show">
      <view class="mask_container">
        <view class="mask_content">
          <view class="mask_con">
            <view class="mask_title"> 学习报告 </view>
            <view class="mask_chart">
              <view class="mask_chart">
                <view
                  class="mask_chart_container"
                  v-for="(item, index) in chartData"
                  :key="index"
                >
                  <text class="mask_chart_name">
                    {{ item.name }}
                  </text>
                  <view class="mask_chart_content">
                    <qiun-data-charts
                      type="ring"
                      :chartData="item.data"
                      :opts="item.options"
                      background="none"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="mask_close" @click="show = false">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/close.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getCourseList,
  getLevelList,
  getNewWordList,
  readReport,
} from "@/api/read";
export default {
  components: {},
  onLoad() {
    this.init();
  },
  data() {
    return {
      routeList: [
        {
          name: "主页",
          url: "",
        },
        {
          name: "分级阅读",
          url: "",
        },
      ],
      courseId: "1",
      courseList: [],
      levelId: "1",
      levelList: [],
      show: false,
      wordList: [],
      chartData: [
        {
          name: "小学英语分级精读训练",
          data: {},
          options: {},
        },
        {
          name: "初中英语分级精读训练",
          data: {},
        },
        {
          name: "高中英语分级精读训练",
          data: {},
        },
        {
          name: "初一英语阅读专项训练",
          data: {},
        },
        {
          name: "初二英语阅读专项训练",
          data: {},
        },
        {
          name: "初三英语阅读专项训练",
          data: {},
        },
      ],
    };
  },
  methods: {
    init() {
      getCourseList().then((res) => {
        this.courseList = res.data;
        this.getLevel();
      });
    },
    getLevel(id) {
      if (id === this.courseId) return;
      if (id) {
        this.courseId = id;
      }
      let params = {
        courseId: this.courseId,
      };
      getLevelList(params).then((res) => {
        this.levelList = res.data;
        this.levelId = this.levelList[0].id;
      });
    },
    chooseCourseLevel(item) {
      if (item.id === this.levelId) return;
      this.levelId = item.id;
    },
    startStudy() {
      uni.navigateTo({
        url: `/pages/read/readChapter?courseId=${this.courseId}&levelId=${this.levelId}`,
      });
    },
    getReport() {
      readReport().then((res) => {
        let data = res.data;
        data.forEach((item, index) => {
          this.initEcharts(item, index);
        });
      });
      this.show = true;
    },
    initEcharts(item, index) {
      this.chartData[index].data = {
        series: [
          {
            data: [
              {
                name: "已解锁",
                value: item.unlockNum,
              },
              {
                name: "未解锁",
                value: item.lockNum,
              },
            ],
          },
        ],
      };
      this.chartData[index].options = {
        title: {
          name: item.totalNum,
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./read";
</style>
